import styled from "styled-components";

export const SongListStyle = styled.div`
  .songTableTitle {
    width: 670px;
    margin: 0 auto;
    height: 35px;
    border-bottom: 2px solid #c20c0c;
    .song-list {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 28px;
    }
    .song-number {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 12px;
      margin: 9px 0 0 20px;
    }
    .song-time-r {
      margin-top: 6px;
      :after {
        content: "";
        display: none;
        clear: both;
        overflow: hidden;
      }
      .play-time-number {
        color: #c20c0c;
      }
    }
  }
  .playList-table {
    width: 670px;
    margin: 0 auto;
    table {
      border: 1px solid #d9d9d9;
      margin-bottom: 30px;

      thead {
        background-position: 0 0;
        tr {
          th {
            height: 35px;
            /* text-align: normal; */
            background-color: #f7f7f7;
            background-position: 0 0;
            background-repeat: repeat-x;
            vertical-align: top;
            text-align: left;
            font-weight: normal;
            color: #666;
            .wp {
              background-position: 0 -56px;
              line-height: 18px;
              padding: 8px 10px;
            }
          }
          .first-kb {
            width: 77px;
          }
          .bt {
            width: 326px;
          }
          .sc {
            width: 91px;
          }
          .gs {
            width: 176px;
          }
        }
      }
      tbody {
        tr {
          height: 30px;
          :nth-child(3),
          :nth-child(1),
          :nth-child(2) {
            height: 70px;
          }
          :nth-child(2n-1) {
            background-color: #f7f7f7;
          }
          :hover .tr-time .tr-time-box {
            display: block;
          }
          :hover .tr-time .tr-time-times {
            display: none;
          }
          .tr-num {
            width: 77px;
            .tr-num-div {
              width: 57px;
              margin: 0 auto;
              span {
                width: 25px;
                text-align: center;
                color: #999;
              }
            }
          }
          .tr-name {
            width: 326px;
            .tr-div {
              .tr-div-box {
                .tr-name-play {
                  display: block;
                  width: 17px;
                  height: 17px;
                  background-position: 0 -103px;
                  margin-right: 7px;
                  cursor: pointer;
                  :hover {
                    background-position: 0 -128px;
                  }
                }
                .tr-name-play-three {
                  margin-top: 17px;
                  margin-left: 10px;
                }

                .tr-div-text {
                  .txt-max {
                    max-width: 279px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    padding-right: 25px;
                    margin-right: -25px;
                    display: inline-block;
                    position: relative;
                    .mv-icon {
                      width: 23px;
                      height: 17px;
                      margin: 1px 0 0 0;
                      background-position: 0 -151px;
                      display: inline-block;
                      position: absolute;
                      right: 0;
                      top: 0;
                    }
                  }
                  .txt-max-three {
                    margin-top: 17px;
                    max-width: 221px;
                  }
                  span {
                    color: #aeaeae;
                  }
                }
              }
            }
          }
          .tr-time {
            padding-left: 10px;
            width: 91px;
            .tr-time-times {
            }
          }
          .tr-songer {
            max-width: 170px;
            padding-left: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            span {
              max-width: 154px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              display: inline-block;
              height: 30px;
              line-height: 35px;
            }
          }
        }
      }
    }
  }
`;
